<template>
  <div class="slba-container">
    <div class="slba-header">
      <div>
        <div class="tj-right">
          <van-icon
            name="arrow-left"
            color="#fff"
            class="home-icon"
            @click="back"
          />
          <van-search
            class="tj-search"
            shape="round"
            background="none"
            v-model="keys"
            placeholder="请输入要搜索的"
          >
            <template #right-icon>
              <div @click="onRefresh" class="tj-search-btn">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
      <van-tabs
        class="custom-tabs2"
        v-model:active="active"
        @click-tab="tabSwitch"
      >
        <van-tab
          v-for="tab in tabs"
          :title="tab.title"
          :border="false"
          :key="tab.name"
          :name="tab.name"
        >
          <template #title>{{ tab.title }} </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="slba-content">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="已经到底了"
          class="my-list"
          @load="onLoad"
        >
          <div v-for="(item, index) in tableData" :key="index">
            <div>
              <div v-if="item.isShowTime" class="my-item-time-div">
                <span class="my-item-time">
                  {{ item.AcceptDate }}
                </span>
              </div>
              <div class="my-item-cell" @click="gotoDetails(item)">
                <div class="my-item-cell-title">
                  <span class="my-item-cell-title-text">
                    备案流水号: {{ item.FilingNumber }}
                  </span>
                  <span>
                    <van-icon name="arrow" color="#222" class="home-icon" />
                  </span>
                </div>
                <div class="my-item-cell-label">
                  <div>
                    <span class="my-item-text-title">备案者名称</span>
                    <span class="my-item-text-content">{{
                      item.BranchesName
                    }}</span>
                  </div>
                  <div>
                    <span class="my-item-text-title">备案状态</span>
                    <span class="my-item-text-content">
                      <span
                        v-if="item.Status == 0"
                        class="my-item-cell-title-status-0"
                      >
                        未提交
                      </span>
                      <span
                        v-if="item.Status == 1"
                        class="my-item-cell-title-status-1"
                      >
                        已提交
                      </span>
                      <span
                        v-if="item.Status == 2"
                        class="my-item-cell-title-status-2"
                      >
                        备案成功
                      </span>
                      <span
                        v-if="item.Status == 3"
                        class="my-item-cell-title-status-3"
                      >
                        备案退回
                      </span>
                      <span
                        v-if="item.Status == 4"
                        class="my-item-cell-title-status-4"
                      >
                        备案撤销
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import "@/assets/css/tabs.css";
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import uiUtil from "@/util/UiUtil.js";
import { getBeiAnType, BeiAnTypeEnum } from "@/bean/BeiAnType";
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);

const keys = ref("");

const back = () => {
  router.back();
};

const tabs = ref([
  { name: "0", title: "全部" },
  { name: "4", title: "经营不分装" },
  { name: "2", title: "委托代销" },
  { name: "3", title: "委托生产" },
  { name: "1", title: "分支机构" },
]);
const active = ref(route.query.name || "0");

const tabSwitch = (item) => {
  console.log(item);

  active.value = item.name;
  router.replace({ query: { ...route.query, name: item.name } });
};
// 当路由发生变化时（例如用户返回该页面时），更新选中的标签索引
watch(route, () => {
  active.value = route.query.name || "tab1";
});

onMounted(() => {
  init();
});
const init = () => {
  getData();
};

const onRefresh = () => {
  page = 1;
  getData();
};
const getData = async () => {
  await getDataList();
};
const onLoad = async () => {
  page = page + 1;
  getData();
};
let page = 1;
let size = 20;
const getDataList = async () => {
  const params = {
    Status: "2",
    fillingType: active.value,
    heji: "0",
    page: page,
    size: size,
    filingNoOrName: keys.value,
  };
  uiUtil.http().getObj({
    url: uiUtil.urlPath.getAcceptList,
    data: params,
    start: () => {
      uiUtil.toastLoading();
    },
    succeed: (res) => {
      // loading.value = false;
      // debugger
      // console.log('1ucceed=', res)
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      if (!res.data || !res.data.records) {
        // 如果返回数据为空，表示已加载完成
        finished.value = true;
        uiUtil.toastClose();
        return;
      }
      if (res.data.records.length > 0) {
        let temp;
        res.data.records.forEach((item) => {
          if (
            temp &&
            isDifferenceGreaterThanFiveSeconds(item.AcceptDate, temp)
          ) {
            item.isShowTime = false;
          } else {
            item.isShowTime = true;
            temp = item.AcceptDate;
          }
          item.typeEnum = getBeiAnType(item.FilingType);
        });

        if (params.page == 1) {
          tableData.value = res.data.records;
        } else {
          tableData.value.push(...res.data.records);
        }
        console.log("tableData.value", tableData.value);
      } else {
        if (params.page == 1) {
          tableData.value = [];
        }
      }
      uiUtil.toastClose();
    },
    failed: (res) => {
      // debugger
      console.log("failed=", res);
      // showFailToast('添加失败')
      uiUtil.toastFail("添加失败");
    },
    finish: () => {
      uiUtil.toastClose();
      loading.value = false;
    },
  });
};

function isDifferenceGreaterThanFiveSeconds(time1, time2) {
  // 将时间字符串转换为 Date 对象
  const date1 = new Date(time1);
  const date2 = new Date(time2);

  // 计算两个时间的差值，单位是毫秒
  const differenceInMilliseconds = Math.abs(date1 - date2);

  // 转换 5 分钟为毫秒
  const fiveSecondsInMilliseconds = 5 * 60 * 1000;

  // 判断差值是否小于于 5 分钟
  return differenceInMilliseconds < fiveSecondsInMilliseconds;
}

const gotoDetails = (item) => {
  router.push({ path: item.typeEnum.xqpath, query: { id: item.UserFilingID } });
};
</script>

<style lang="less" scoped>
.slba-container {
  background: url("@/assets/img/main/all_bg.png") no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.slba-header,
.slba-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 0;
}

.slba-content {
  flex: 1 1 auto;
  overflow: auto;
  background-color: #f3f9f8;
  padding: 0 12px;
}

.slba-tabbar {
  background-color: transparent;
  color: #fff;
}

.slba-left-text {
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}

.slba-title-text {
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}

.slba-right-text {
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}

.my-list {
  padding-bottom: 100px;
}

.my-item-list {
  margin: 0 12px;
}

.my-item-cell {
  margin: 12px 0 0 0;
  padding: 16px 12px;
  border-radius: 4px;
  background-color: white;
}

.my-item-cell-title {
  display: flex;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  align-items: center;
}

.my-item-cell-title-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #222;
}

.my-item-cell-title-status-0 {
  font-size: 10px;
  font-weight: 400;
  color: #888;
  background-color: #f5f5f5;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-1 {
  font-size: 10px;
  font-weight: 400;
  color: #2a95ff;
  background-color: #e7f6ff;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-2 {
  font-size: 10px;
  font-weight: 400;
  color: #16ce8a;
  background-color: #e7fff6;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-3 {
  font-size: 10px;
  font-weight: 400;
  color: #ff6429;
  background-color: #ffefdf;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-title-status-4 {
  font-size: 10px;
  font-weight: 400;
  color: #eea300;
  background-color: #fff6e7;
  padding: 4px 8px;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  margin-right: 5px;
}

.my-item-cell-label {
  margin-top: 12px;
  border-radius: 4px;
  background-color: #f9f9f9;
  padding: 16px;
}

.my-item-text-title {
  display: inline-block;
  min-width: 50px;
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: #888;
}

.my-item-text-content {
  margin-left: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #222;
}

.my-item-time-div {
  margin-top: 12px;
  text-align: center;
}

.my-item-time {
  border-radius: 65px;
  padding: 6px 15px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.my-item-cell-btn {
  margin-top: 12px;
  text-align: right;
}

.my-item-cell-btn .van-button {
  height: 36px;
}

.tj-right {
  display: flex;
  align-items: center;
}
.home-icon {
  padding: 10px 0 10px 10px;
  /* 图标与其他元素的间距 */
}
.tj-search {
  flex: 1;
}
.tj-search-btn {
  background: linear-gradient(to right, #00bf87, #25f0a0);
  color: #fff;
  padding: 3px 17px;
  border-radius: 24px;
  text-align: center;
}
</style>